<template>
  <Modal v-model="model" title="多方管理"  sticky reset-drag-position @on-cancel="cancel"  footer-hide draggable scrollable class="pstnNumber_time" width="1200"  height="600">
           <invitepage @closeInvitepage="closeInvitepage" :showInvitepage="showInvitepage"></invitepage>

            <div style="overflow: hidden;margin-bottom:10px">
              <div style="float:left;color:#18a9eb">会议室成员(<span>{{this.meetingroomList.length}}</span>)人</div>
              <div style="float:right">
                <Button type="primary" class="submit_btn" @click="appearInvite">邀请</Button>
                <Button type="primary" class="submit_btn" @click="endmeeting()" >结束会议</Button>
              </div>
            </div>
            <div class="table_head">
                    <table width="100%">
                      <tr>
                        <th class="font_style_set" style="width:17%;">号码</th>
                        <th class="font_style_set" style="width:23%;">加入时长</th>
                        <th class="font_style_set" style="width:20%;">状态</th>
                        <th class="font_style_set" style="width:40%;">操作</th>
                      </tr>
                    </table>
            </div>
            <div class="footer_style">
                <table class="table_head_footer" table width="100%" style="border-bottom: 1px solid #d1d1d1;">
                  <tr v-for="(item , index) in meetingroomList" :key="index" :id="item.id">
                    <td style="width:15%;text-align: center;">{{item.number}}</td>
                    <td style="width:15%;text-align: center;">{{item.hour<10?"0"+item.hour:item.hour}}:{{item.minute<10?"0"+item.minute:item.minute}}:{{item.second<10?"0"+item.second:item.second}}</td>
                    <td style="width:20%;text-align: center;">{{item.statu}}</td>
                    <td style="width:20%;text-align: center;display:none">{{item.memberID}}</td>
                    <td style="width:20%;text-align: center;display:none">{{item.iscustomerflag}}</td>
                    <td style="width:30%;text-align: center;" class="template_table_btn">
                      <Button v-if="item.silence" v-bind:disable="dis" @click="silencebtn(index)">静音</Button>
                      <Button v-if="item.unmute" @click="unmutebtn(index)">取消静音</Button>
                      <Button v-if="item.remove" v-bind:disable="dis" @click="removebtn(index)">移除</Button>
                      <Button v-if="item.reinvite" @click="reinvitebtn(index)">重新邀请</Button>
                    </td>
                  </tr>
                </table>
            </div>

  </Modal>

</template>

<script>
  
import invitepage from './Invitepage.vue';

  export default {
    name: "MultipartyPop",
    props: {
      showMultiparty:Boolean,
      meetingroomList:Array,
      timer:Array,
    },
    components: {
        invitepage
    },
    data(){
      return {
        model:false,
        dis: false,
        id:"",
        showInvitepage: false,
        hour: 0,
        minute: 0,
	      second: 0,
        timeMount:'',
      }
    },
    methods:{
         //显示邀请成员弹窗
        appearInvite:function () {
          this.showInvitepage=true;
        },
        //关闭邀请成员弹窗
        closeInvitepage:function(type,number){
            if (type == "cancel") {
                this.showInvitepage=false;
                return false;
            }
            if (type == "invitee") {
              this.showInvitepage=false;
            for(var i = 0;i< this.meetingroomList.length;i++){
              for(var j = 0;j<number.length;j++){                                          
                if( this.meetingroomList[i].number == number[j] && this.meetingroomList[i].statu =="已接通"){
                   number.splice(j, 1);
                   
                }else if( this.meetingroomList[i].number == number[j] && this.meetingroomList[i].statu =="呼叫中"){
                   number.splice(j, 1);
                   
                }else if(this.meetingroomList[i].number == number[j] && this.meetingroomList[i].statu =="离开会议"){
                  this.meetingroomList[i].statu="呼叫中";
                  this.$emit("closeMultiparty",'invitee',this.meetingroomList[i].number);
                  number.splice(j, 1);
                  

                }else if(this.meetingroomList[i].number == number[j] && this.meetingroomList[i].statu =="未接通"){
                    this.meetingroomList[i].statu="呼叫中";
                    this.$emit("closeMultiparty",'invitee',this.meetingroomList[i].number);
                    number.splice(j, 1);
                }
              }
            }
              number.forEach((key,index) => {
                let member = {
                    "number":key,
                    "jointime":0,
                    "statu":"呼叫中",
                    "memberID":null,
                    "silence":false,
                    "remove":false,
                    "unmute":false,
                    "reinvite":false,
                    "hour":0,
                    "minute":0,
                    "second":0,
                }
                this.meetingroomList.push(member);  
                this.$emit("closeMultiparty",'invitee',key);
              })
            }

        },

      silencebtn:function(index){  //静音
        
                this.meetingroomList[index].remove =true;
        
                let surenumber=this.meetingroomList[index].memberID;
                this.meetingroomList[index].silence = false;
                this.meetingroomList[index].unmute = true;
                this.meetingroomList[index].reinvite = false;
                this.$emit("closeMultiparty",'mute',surenumber);
      },
      removebtn:function(index){  //移除
        if(this.meetingroomList[index].iscustomerflag=="1"){
            this.$Modal.confirm({
              title: '提示',
              content: "移除该客户后将结束会议，是否确定",
              onOk: () => {
                          let surenumber=this.meetingroomList[index].memberID;
                          this.meetingroomList[index].silence = false;
                          this.meetingroomList[index].unmute = false;
                          this.meetingroomList[index].remove = false;
                          this.meetingroomList[index].reinvite = true;
                          this.meetingroomList[index].statu="离开会议";
                          //移除后时间清0
                          this.meetingroomList[index].second = 0;
                          this.meetingroomList[index].hour = 0;
                          this.meetingroomList[index].minute = 0;
                          this.$emit("closeMultiparty",'kickoff',surenumber);
              }
            });
        }else{
              let surenumber=this.meetingroomList[index].memberID;
              this.meetingroomList[index].silence = false;
              this.meetingroomList[index].unmute = false;
              this.meetingroomList[index].remove = false;
              this.meetingroomList[index].reinvite = true;
              this.meetingroomList[index].statu="离开会议";
              //移除后时间清0
              this.meetingroomList[index].second = 0;
              this.meetingroomList[index].hour = 0;
              this.meetingroomList[index].minute = 0;

              this.$emit("closeMultiparty",'kickoff',surenumber);
        }

      },
      unmutebtn:function(index){  //取消静音
        
        this.meetingroomList[index].remove =true;
        
        let surenumber=this.meetingroomList[index].memberID;
        this.meetingroomList[index].silence = true;
        this.meetingroomList[index].unmute = false;
        this.meetingroomList[index].reinvite = false;
        this.$emit("closeMultiparty",'unmute',surenumber);
      },
      reinvitebtn:function(index){  //重新邀请

        let surenumber=this.meetingroomList[index].number;
        this.meetingroomList[index].silence = false;  //静音应该变为灰色
        this.dis=true,
        this.meetingroomList[index].unmute = false;
        this.meetingroomList[index].remove = false;//移除应该变为灰色
        this.meetingroomList[index].reinvite = false;
        this.meetingroomList[index].statu="呼叫中";
        this.$emit("closeMultiparty",'invitee',surenumber);

      },
      cancel:function(){
        this.$emit("closeMultiparty",'cancel');
      },
      //结束会议
      endmeeting:function(){
        clearInterval(this.timeMount);
        this.$emit("closeMultiparty",'endmeeting');
        this.showInvitepage = false;
      },
      //加入时长增加事件
      addtime:function() {
        clearInterval(this.timeMount);
        for (let k=0;k<this.meetingroomList.length;k++){
          let status=this.meetingroomList[k].statu;
          if(status=="已接通"){
            let second = this.meetingroomList[k].second + 1;
            let minute = this.meetingroomList[k].minute;
            let hour = this.meetingroomList[k].hour;
            if (second >= 60) {
              second = 0;
              minute = minute + 1;
            }
            if (minute >= 60) {
              minute = 0;
              hour = hour + 1;
            }
            this.second = second;
            this.minute = minute;
            this.hour = hour;
            this.meetingroomList[k].second=second;
            this.meetingroomList[k].minute=minute;
            this.meetingroomList[k].hour=hour;
          }
        }
        this.timeMount= setInterval(() =>{
          this.addtime();
        },1000);

      }

    },
    watch:{
      showMultiparty:function () {
        this.model=this.showMultiparty;
        if( this.model==true){
             	this.second = 0;
              this.hour = 0;
              this.minute = 0;
              this.addtime();
        }
        
      }
    },
    created() {

    },
    beforeDestroy() {
    },
    destroyed() {
      clearInterval(this.timeMount);
    }
  }
</script>

<style scoped></style>
